<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景固定</title>
  <style>
    div{
      margin: 0 auto;
      width: 1200px;
      height: 900px;
      background-image: url("../img/bg.jpg");
      background-repeat: no-repeat;
      background-position: center top;
      background-attachment: fixed; /* 默认滚动 设置为固定可以做视差效果 */
    }
    body{
      /* background: 背景颜色 背景图片地址 背景平铺 背景滚动 */
      background:black url("../img/bg.jpg") no-repeat fixed;
    }
  </style>
</head>
<body>
  <div>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, dolor.</p>
      <p>Excepturi voluptate accusamus temporibus rem aliquam corrupti enim quas? Rem.</p>
      <p>Explicabo expedita ut excepturi non corrupti vel quo iste repellendus?</p>
      <p>Esse nihil expedita excepturi a labore et cupiditate eos dolorum?</p>
      <p>Odio inventore ipsa ab ad nam similique numquam error impedit!</p>
      <p>At est nesciunt cum natus itaque maxime expedita soluta nostrum.</p>
      <p>Rerum natus odit sed et consectetur eius, non ex est!</p>
      <p>Perferendis, necessitatibus tempore! Dicta explicabo necessitatibus, vitae odit eos nobis.</p>
      <p>Atque dolorum ea rem doloribus, doloremque quia consequatur perspiciatis. Repellat.</p>
      <p>Cum laboriosam inventore, fuga quo tempore suscipit sapiente dolores voluptatum.</p>
      <p>Maiores maxime consequatur dolores. Ullam nulla eligendi adipisci neque tenetur?</p>
      <p>Veritatis, eligendi debitis magnam tempora corrupti dignissimos similique. Molestias, maiores!</p>
      <p>Magni, consectetur praesentium. Debitis itaque repellat officiis eligendi deserunt doloremque!</p>
      <p>Dolorum excepturi dolorem delectus inventore? Sed quia est ab vel?</p>
      <p>Animi, assumenda. Ipsam ex nesciunt, quas sed blanditiis minus maxime.</p>
      <p>Assumenda earum saepe ratione illo dolorum voluptatibus. Eos, fuga eum.</p>
      <p>Quidem sunt dolorum, nulla necessitatibus incidunt aut laboriosam reprehenderit natus?</p>
      <p>Repudiandae voluptas, aperiam et quisquam molestias voluptatibus voluptates sunt consectetur.</p>
      <p>Neque est necessitatibus unde molestiae architecto nihil. Error, perferendis illum!</p>
      <p>Quos error sequi quibusdam eum optio mollitia alias debitis ipsam?</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, dolor.</p>
      <p>Excepturi voluptate accusamus temporibus rem aliquam corrupti enim quas? Rem.</p>
      <p>Explicabo expedita ut excepturi non corrupti vel quo iste repellendus?</p>
      <p>Esse nihil expedita excepturi a labore et cupiditate eos dolorum?</p>
      <p>Odio inventore ipsa ab ad nam similique numquam error impedit!</p>
      <p>At est nesciunt cum natus itaque maxime expedita soluta nostrum.</p>
      <p>Rerum natus odit sed et consectetur eius, non ex est!</p>
      <p>Perferendis, necessitatibus tempore! Dicta explicabo necessitatibus, vitae odit eos nobis.</p>
      <p>Atque dolorum ea rem doloribus, doloremque quia consequatur perspiciatis. Repellat.</p>
      <p>Cum laboriosam inventore, fuga quo tempore suscipit sapiente dolores voluptatum.</p>
      <p>Maiores maxime consequatur dolores. Ullam nulla eligendi adipisci neque tenetur?</p>
      <p>Veritatis, eligendi debitis magnam tempora corrupti dignissimos similique. Molestias, maiores!</p>
      <p>Magni, consectetur praesentium. Debitis itaque repellat officiis eligendi deserunt doloremque!</p>
      <p>Dolorum excepturi dolorem delectus inventore? Sed quia est ab vel?</p>
      <p>Animi, assumenda. Ipsam ex nesciunt, quas sed blanditiis minus maxime.</p>
      <p>Assumenda earum saepe ratione illo dolorum voluptatibus. Eos, fuga eum.</p>
      <p>Quidem sunt dolorum, nulla necessitatibus incidunt aut laboriosam reprehenderit natus?</p>
      <p>Repudiandae voluptas, aperiam et quisquam molestias voluptatibus voluptates sunt consectetur.</p>
      <p>Neque est necessitatibus unde molestiae architecto nihil. Error, perferendis illum!</p>
      <p>Quos error sequi quibusdam eum optio mollitia alias debitis ipsam?</p>
  </div>
</body>
</html>